<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/kendocommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>客户基本信息</title>
    <meta charset="utf-8">
     <style type="text/css">
    	table{font-size:12px};
    </style>
    <script>
        $(document).ready(function() {
        	
        	$(".various").fancybox({
        		maxWidth	: 1000,
        		maxHeight	: 700,
        		fitToView	: false,
        		width		: '80%',
        		height		: '80%',
        		autoSize	: false,
        		closeClick	: false,
        		openEffect	: 'none',
        		closeEffect	: 'none'
        	});
        	
        	$("#toolbar").kendoToolBar({
	            resizable: false,
	            items: [
	                { type: "separator" },
	                { template: "<label>手机号:</label><input name='phone' id='phone' class='k-textbox'>" },
	                { template: "<label>用户:</label><input name='userName' id='userName' class='k-textbox'>" },	                
	                { template: "<label>会员号</label><input name='member_number' id='member_number'>" },
	                { template: "<label>会员类型</label><input name='member_type' id='member_type'>" },	                
	                { type: "separator" },
	                { type: "button", text: "查找",click: queryCustomerList }
	            ]
	        });
	        
            dataSource = new kendo.data.DataSource({
                transport: {
                    read:  {
                        url: "${path}/assist/queryCustomerList",
                        dataType: "json",
                        data: function() {
					        return {
					         	phone:$('#phone').val(),
					         	userName:$('#userName').val(),
					         	member_number:$('#member_number').val(),
					         	member_type:$('#member_type').val()
					        };
					    } 
                    }
                },
                serverPaging: true,
                serverFiltering: true,
                pageSize: 15,
                schema: {
                	data:"data",
               		total:"total",
               		model: {
               			id: "cid",
				        fields: {
				          checked:{editable: false},
				          memberType:{editable: false},
				          memberNumber:{editable: false},
				          mname:{editable: false},
				          englishName:{editable: true},
				          nickname:{editable: true},
				          tb_num:{editable: false},
				          zj_num:{editable: false},
				          jphone:{editable: false},
				          jname:{editable: false},				          
				          memberTime:{editable: false}
				        }
				    }
                }
            });
            
            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: {
					refresh: true,
					pageSizes: true,
					buttonCount: 5,
					page: 1,
					pageSize: 10,
					pageSizes: [10, 20, 30],
					messages: {
						display: "显示 {0}-{1} 共 {2} 项",
						empty: "没有数据",
						itemsPerPage: "每面显示数量",
						first: "第一页",
						last: "最后一页",
						next: "下一页",
						previous: "上一页"
					}
				},
                selectable: "multiple row",
                allowCopy: true,
                editable:{
                	mode:'inline',
                	update:true
                },
                columns: [
                    { field:"checked", template: "<input type='checkbox' class='gridchk'/>",width: "50px",
                    headerTemplate: '<input type="checkbox" id="check-all"/>',editable: false},
                    { field:"memberType", title: "是否会员",width: "80px",template:checkMemberTemp},
                    { field: "memberNumber", title:"会员号",  width: "120px"},//format: "{0:c}",locked: true,
                    { field:"mname", title: "宝宝姓名",width: "150px",template:queryCustomerTemp},
                    { field:"englishName", title: "英文名",width: "150px"},
                    { field:"nickname", title: "昵称",width: "150px"},
                    { field:"tb_num", title: "托班",width: "80px"},
                    { field:"zj_num", title: "早教",width: "80px"},
                    { field:"jname", title: "主要监护人",width: "200px"},
                    { field:"jphone", title: "监护人联系方式",width: "200px"},
                    { field:"memberTime", title: "入会时间",width: "150px"},
                    { command: [{name:"photoGrid",text:"<span class='k-icon k-i-group'></span>查看",click:queryPhotoList,buttonType:"ImageAndText"}], 
                    	attributes:{style:"text-align:center"},headerAttributes:{style:"text-align:center"},title: "照片", width: "100px" },
                    { command: [{name:"videoGrid",text:"<span class='k-icon k-i-group'></span>查看",click:queryVideoList,buttonType:"ImageAndText"}], 
                    	attributes:{style:"text-align:center"},headerAttributes:{style:"text-align:center"},title: "视频", width: "100px" },
                    { command: [{name:"comment",text:"<span class='k-icon k-i-group'></span>查看",click:queryCommentList,buttonType:"ImageAndText"}], 
                        attributes:{style:"text-align:center"},headerAttributes:{style:"text-align:center"},title: "评论", width: "100px" },
                    { command: ["edit"], title: "操作", width: "200px" }    
                    ],
                    save: function(e) {
                    	console.log(e.model);
                    	var data={'cid':e.model.cid,'englishName':e.model.englishName,'nickname':e.model.nickname};
                    	//e.preventDefault();
                    	$.ajax({
               			 	url: "${path}/assist/updateUser",    //请求的url地址
               			 	dataType: "json",  
               			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
               			 	data:data,    //参数值
               			 	success: function(req) {
	               			 	//console.log(req);
	               			 	alert(req.msg);
	               			 	$("#grid").getKendoGrid().dataSource.fetch();
            				},
            				error:function(req) {
            					alert('异常');					
            				}
            			});
                    } 
            });
            
			$("#member_type").kendoComboBox({
		     	dataValueField: "value",
		        dataTextField: "text",
		        dataSource: [
		                     { text: "普通会员", value: 0},
		                     { text: "充值卡会员", value: 1},
		                     { text: "会员卡会员", value: 2}
		                 ],
		        select: function(e) {
					var value = this.value();
    				var item = e.item;  							      					    
					selectItem=e.sender.dataItem(item);
				}
			});
    
            $('#grid').css("height",document.body.clientHeight-40);
		});
		
        var userIDs=new Array();
        //获取被选择的人的userID
        var addPhoto=function(e){
        	var customergrid = $("#grid").data("kendoGrid").items();        	
        	var customerdata=$("#grid").data("kendoGrid").dataSource.data();
        	$.each(customergrid, function (i, item) {
        		
        		var userDate=customerdata[i];       	     		
        		var userID=new Object();
        		
				var cbxController = $(item).find(".gridchk");
				var isChecked = cbxController.is(":checked");
				if(isChecked){
					userID.c_user_id=userDate.cid;
					userID.c_family_id=userDate.c_family_id;
					userIDs.push(userID);
				}							
			});
        }

		var queryCustomerList = function(e){//查询
			$("#grid").data("kendoGrid").dataSource.fetch();
			$("#grid").data("kendoGrid").dataSource.page(1);
		}
		
		var checkMemberTemp = function(dataItem){
			var retStr = "";
			switch(dataItem.memberType){
				case "0":retStr = "注册会员";break;
				case "1":retStr = "充值会员";break;
				case "2":retStr = "会员";break;
			}
			return retStr;
		}
		
		var queryCustomerTemp = function(dataItem){//查询客户信息
			return "<a href='${path}/assist/memberInfo?c_user_id="+dataItem.cid+"' style='color:#000' class='various' data-fancybox-type='iframe' title='会员信息'>" + dataItem.mname + "</a>";
		}
		
		//查看照片
		var queryPhotoList = function(e){
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            //setFormData(data);
            $('#photolist').attr('href','${path}/assist/photolist?c_user_id='+data.cid);
			$.fancybox($("#photolist"));
		}
		
		//查看评论
		var queryCommentList = function(e){
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            $('#commentlist').attr('href','${path}/assist/commentList?c_user_id='+data.cid);
			$.fancybox($("#commentlist"));
		}
		
		//查看视频
		var queryVideoList = function(e){
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            $('#videolist').attr('href','${path}/assist/videolist?c_user_id='+data.cid);
			$.fancybox($("#videolist"));
		}
		
		//查看文字
		var queryTextList = function(e){
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            $('#textlist').attr('href','${path}/assist/textlist?c_user_id='+data.cid);
			$.fancybox($("#textlist"));
		}
		
		var toolbarTemp = function(dataItem){
			return "<label>时间:</label><input name='querydate' id='querydate' class='k-textbox'>";
		}
		
		var selectTemp = function(dataItem){
			return "<label>是否会员:</label><select id='isMember' name='isMember'>"+
                		"<option value ='' selected='selected'></option>"+
                		"<option value ='1'>是</option>"+
                		"<option value ='0'>否</option>"+
		            "</select>";
		}
		
		var queryCustomerInfo = function(e){
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            setFormData(data);
			$.fancybox($("#inlineForm"));
		}
		
		var setFormData = function(data){
			$('#baby_name').val(data.baby_name);
		}
		
    </script>
</head>
<body class="page-body">
	<div id="toolbar" style="margin:2px"></div>
    <div id="grid" style="margin:2px;font-size:10px"></div>
    
    
    <div style="display: none;">		
		<div id="inlineForm" style="width:600px;overflow:auto;">
			<table>
                <tr>
                    <td style="width:100px;padding:5px">
                        <span  style="width:90px">客户名字</span>
                    </td>
                    <td style="width:220px;padding:5px">
                    	<input type="text" placeholder="标题" name="baby_name" id="baby_name"
                    		 style="width:200px" class="k-textbox" >
                    </td>
                    <td colspan="3" style="padding:5px" style="width:320px">
                    </td>
                </tr>
                
                <tr>
                    <td style="padding:5px">
                        <span  style="width:90px">开始日期</span>
                    </td>
                    <td style="padding:5px">
                        <input name="starttime" id="starttime" style="width:200px" class="k-textbox">
                    </td>
                    
                    <td style="padding:5px">
                        <span  style="width:90px">完成时间</span>
                    </td>
                    <td style="padding:5px">
                        <input style="width:200px" name="endtime" id="endtime" class="k-textbox">
                    </td>
                </tr>
                <tr>
                    <td style="width:100px;padding:5px">
                        <span  style="width:90px">内容</span>
                    </td>
                    <td colspan="3" style="padding:5px">
                        <textarea name="content" id="content" style="width:480px;height:200px" class="k-textbox"></textarea>
                    </td>
                </tr>
            </table>
		</div>
	</div>
	
	<a href="${path}/assist/textlist" class="fancybox fancybox.iframe" id="textlist" title="文字信息" style="display:none"></a>
    <a href="${path}/assist/photolist" class="fancybox fancybox.iframe" id="photolist" title="照片信息" style="display:none"></a>
    <a href="${path}/assist/videolist" class="fancybox fancybox.iframe" id="videolist" title="视频信息" style="display:none"></a>
    <a href="${path}/assist/commentList" class="fancybox fancybox.iframe" id="commentlist" title="评论信息" style="display:none"></a>
    
</body>
</html>
